<template>
  <transition name="slide">
    <div class="aboutUs">
      <div class="about_us">
        <div class="img_grp">
          <img :src="logo" alt="">
        </div>
        <p>心象 V2.2.6</p>

        <div class="about_module">
          <div class="header">
            <div class="title_grp">
              <div class="title_icon"></div>
              介绍
            </div>
          </div>
          <div class="about_content">
            {{company.post_content}}
          </div>

        </div>

        <div class="about_module">
          <div class="header">
            <div class="title_grp">
              <div class="title_icon"></div>
              联系我们
            </div>
          </div>

          <ul class="contact_us">
            <li>电话：{{company.company_phone}}</li>
            <li>邮箱：{{company.company_email}}</li>
            <li>地址：{{company.company_addr}}</li>
          </ul>

        </div>
      </div>

      <div class="copy_right">
        <p>《心象用户协议》</p>
        <p>厦门翔通动漫有限公司版权所有</p>
        <p>Copyright © 2016-2018 ALL Rights Reserved</p>
      </div>
    </div>
  </transition>
</template>
<script>
  export default {
    data() {
      return {
        company: '',
        logo: ''

      }
    },
    created() {
      this.getAboutUs()
    },
    methods: {
      getAboutUs() {
        this.axios.get('/api/admin/wechat/about').then((res) => {
          if (res.data.code === 200) {
            this.company = res.data.data
            this.logo= res.data.data.more.thumbnail
          }
        })
      }
    }
  }
</script>

<style scoped>

  .aboutUs {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    min-height: 1334px;
    background-color: #f5f4f7;
    width: 100%;
  }

  .about_us {
    height: 1054px;
    padding: 57px 26px 120px 26px;
    background-color: white;
  }

  .img_grp {
    width: 170px;
    height: 170px;
    border-radius: 44px;
    overflow: hidden;
    margin: 0 auto;
    border: solid 1px #e5e5e5;
  }

  p {
    text-align: center;
    font-size: 30px;
    color: #1ac1ca;
  }

  .about_module {
    margin-bottom: 20px;
  }

  .header {
    width: 100%;
    height: 90px;
    line-height: 90px;
    /*border-bottom: solid 1px #e5e5e5;*/

  }

  .title_grp {
    width: 180px;
    float: left;
    font-size: 34px;
    font-weight: bold;
    color: black;
    position: relative;
  }

  .title_icon {
    width: 6px;
    height: 34px;
    border-radius: 3px;
    background: #059692;
    float: left;
    margin-top: 28px;
    margin-right: 20px;
  }

  .about_content {
    padding-left: 26px;
    color: #666;
    font-size: 28px;
    line-height: 1.79;
  }

  ul {
    padding-left: 26px;
  }

  li {
    color: #666;
    font-size: 28px;
    line-height: 1.79;
  }

  .copy_right {
    height: 164px;
    background-color: #f5f4f7;
    margin-top: 6px;

  }

  .copy_right p {
    text-align: center;
    font-size: 24px;
    color: #797979;
    /*line-height: 1.83;*/

  }

  .copy_right p:nth-of-type(3) {
    font-size: 20px;
    color: #999;
  }


</style>
